<template>
  <div class="myInformation">
    <div class="myImg">
      <span class="iconfont icon-shouxinxiangqing-shoujihaoma"></span>
      <span >{{name}}</span>
      <div class="block">
        <el-rate
                v-model="value"
                disabled
                show-score
                text-color="white"
                score-template="{value}">
        </el-rate>
      </div>
      <span>订单数：{{orderData.length}}</span>
      <span>好评率：{{pingfen}}%</span>
    </div>
    <div class="myDetail">
      <div>
        <span class="iconfont icon-baoxianxinxi">  我的订单</span>
        <span @click="myOrder" class="iconfont icon-jiantouarrow487"></span>
      </div>
      <div>
        <span class="iconfont icon-pingjia">我的评价</span>
        <span  @click="myEvaluation" class="iconfont icon-jiantouarrow487"></span>
      </div>
    </div>
  </div>
</template>
<style>
  @import '../../assets/font/yl/iconfont.css';
</style>
<script>
  import * as api from '../../utils/api'
  export default {
    name:'carInfo',
    data(){
      return{
        value1: null,
        name:'',
        loginData:{},
        orderData:{},
        value:0,
        pingjiaData:[],
        zongpingfen:0,
      }
    },
    created() {
      this. searhDriver()
      this.getMyOrder()
      this.chaxunpingjia()
    },
    computed:{
      pingfen(){
        for (let i=0;i<this.pingjiaData.length;i++){
          this.zongpingfen = this.zongpingfen + this.pingjiaData[i].star_number
        }
        this.value = parseInt(this.zongpingfen/this.pingjiaData.length)
        return parseInt(this.zongpingfen/(this.pingjiaData.length*5)*100)
      },
    },
    methods:{
      // 通过电话查询司机
      searhDriver(){
        this.loginData=this.$store.state.msgCount.user
        // console.log(this.loginData.user_phone)
        this.axios({
          method:'get',
          url:api.GET_DRIVERBYID ,
          params:{userId:this.loginData.user_id}
        }).then(data=>{
          // console.log(data)
          if(data.data.code===200){
            this.name=data.data.data[0].user_name
          }
          else{
            this.$message.error('查无此人');
          }
        })
      },
      getMyOrder(){
        this.loginData=this.$store.state.msgCount.user
        // console.log(this.loginData.user_id)
        this.axios({
          method:'get',
          url:api.GET_DRIVERORDER,
          params:{userId:this.loginData.user_id}
        }).then(data=>{
                this.orderData=data.data.data
        })
      },
      // icon的我的订单点击跳转到我的订单（carOrder)页面
      myOrder(){
        this.$router.push('/carHome/carOrder')
      },
      // 点击iicon跳转到我的评价页面
      myEvaluation(){
        this.$router.push('/carHome/userPinjia')
      },
      // // 点击iicon跳转到个人中心页面
      // myInfor(){
      //   this.$router.push('/carHome/carPersonal')
      // },
      chaxunpingjia(){
        this.axios({
          url: api.GET_FINDDRIVEREVAL,
          method: 'get',
          params:{
            userId:this.$store.state.msgCount.user.user_id
          }
        }).then(data=>{
          // console.log(data)
          this.pingjiaData = data.data.data
        })
      },
    },
  }
</script>

<style scoped lang="less">
  .myInformation{
    width: 40%;
    height: 90vh;
    margin: auto;
    background-color: #879fc8;
    /*background-color: #ececec;*/
  }
  .myImg{
    /*color: ;*/
    /*color: #858585;*/
    font-size: 16px;
    height: 8rem;
    padding-top: 3rem;
    margin-left: 3rem;
    position: relative;
  }
  .icon-shouxinxiangqing-shoujihaoma{
    font-size:50px;
    line-height: 8rem;
    position: absolute;
    left: 0;
  }
  .myImg>span:nth-of-type(2){
    position: absolute;
    left: 7rem;
    font-size: 14px;
    line-height: 5rem;
  }
  .el-rate{
    position: absolute;
    left: 18rem;
    line-height: 6rem;
  }
  .myImg>span:nth-of-type(3){
    position: absolute;
    bottom: 1rem;
    left: 7rem;
  }
  .myImg>span:nth-of-type(4){
    position: absolute;
    bottom: 1rem;
    right: 10rem;
  }
  .myDetail{
    margin-top: 100px;
  }
  .myDetail>div{
    margin: 40px;
    background-color: #FFFFFF;
    border: 1px solid white;
    line-height: 50px;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }
  .myDetail>div>span:nth-of-type(2){
    width: 50px;
    height: 60px;
  }
  .icon-jiantouarrow487:before{
    font-size: 20px;
    color: gray;
  }

</style>